<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <span slot="before">有 0 条考勤审批尚未处理</span>
        <template v-slot:after>
          <el-button
            type="primary"
            size="small"
            @click="$router.push('/import')"
            >导入</el-button
          >
          <el-button type="primary" size="small" @click="tiDialog = true"
            >提醒</el-button
          >
          <el-button type="primary" size="small" @click="showDialog = true"
            >设置</el-button
          >
          <el-button type="primary" size="small">历史归档</el-button>
          <el-button type="primary" size="small">月份报表</el-button>
        </template>
        <template v-slot:footer>
          <div class="footer">
            <h4>部门:</h4>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="item in checkList"
                :key="item.id"
                :label="item.id"
              >
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
            <div class="foo">
              <h4>考勤状态</h4>
              <el-radio-group v-model="radio">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="2">旷工</el-radio>
                <el-radio :label="3">事假</el-radio>
                <el-radio :label="4">调休</el-radio>
                <el-radio :label="5">迟到</el-radio>
                <el-radio :label="6">早退</el-radio>
              </el-radio-group>
            </div>
          </div>
        </template>
      </page-tools>
      <el-card>
        <el-table :data="tabList" style="width: 100%">
          <el-table-column type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="username" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="workNumber" label="工号"> </el-table-column>
          <el-table-column prop="departmentName" label="部门">
          </el-table-column>
          <el-table-column prop="mobile" label="手机"> </el-table-column>
        </el-table>
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="page.size"
            :current-page="page.page"
            :total="page.total"
            @current-change="changePage"
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <el-dialog title="提醒" :visible="tiDialog" width="30%" @close="btnCancel">
      <span
        >系统将通过邮件与短信的形式，对全体员工中存在旷工的考勤进行提醒，该提醒每月仅可发送
        1 次。</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 点击设置的弹层 -->
    <set-setting :showDialog.sync="showDialog" />
  </div>
</template>

<script>
import { getDepartment, getDepartDetail } from '@/api/department'
import { getempList } from '@/api/employees'
import setSetting from './components/set-setting.vue'
export default {
  data () {
    return {
      radio: 1,
      checkList: [],
      tabList: [],
      page: {
        page: 1,
        size: 10,
        total: 0
      },
      tiDialog: false, // 提醒弹层
      showDialog: false
    }
  },
  components: {
    setSetting
  },
  created () {
    this.getDepartment()
    this.getempList()
  },
  methods: {
    async getDepartment () {
      let res = await getDepartment()
      // console.log(res)
      this.checkList = res.data.depts
    },
    async getempList () {
      let res = await getempList(this.page)
      console.log(res)
      this.page.total = res.data.total
      this.tabList = res.data.rows
    },
    changePage (newPage) {
      this.page.page = newPage
      this.getempList()
    },
    // 取消提醒弹层
    btnCancel () {
      this.tiDialog = false
    }
  }
}
</script>

<style>
.footer {
  margin-top: 20px;
}
.footer h4 {
  margin-bottom: 10px;
}
.foo {
  margin-top: 20px;
  display: flex;
}
.foo h4 {
  margin: 0 30px 0 0;
}
</style>
